<template>
    <div id="date_time_picker">
   
      <van-button plain type="primary" @click="showPopFn()">{{btnName}}</van-button>
    
      <van-popup :show="show" position="bottom" >


        <van-datetime-picker
          v-model="currentDate"
          type="datehour"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          :filter="dateFilter"
          @change="changeFn"
          @confirm="confirmFn" 
          @cancel="cancelFn()"
        />
      </van-popup>
   
    </div>
  </template>
   
  <script>
    import moment from "moment"
    export default {
      props:{
        selBtnName: {
          type: "string",
          default: "点击选择日期"
        },
        style:{
          type: "object",
          default:""
        },
        
      },  
      data() {
        return {
          msg: "",
          currentDate: Date,
          changeDate: new Date(),
          minDate:new Date().getTime(),
          //maxDate:new Date(new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * 7)),

          show: false, // 用来显示弹出层
          btnName:'点击选择日期',
          timeValue: ""
        }
      },
      computed:{
        maxDate(){
          let date1 = new Date()
          date1.setMonth(date1.getMonth() + 1)

          return date1.getTime();
        }
      },
      methods: {
        dateFilter(type, options) {
          if (type === 'minute') {
            return options.filter(option => option % 5 === 0);
          }

          return options;
        }, 
        showPopFn() {
          this.show = true;
          console.log("this.show",this.show)
          console.log("currentDate>>",this.currentDate)


        },
        showPopup() {
          this.show = true;
        },
        changeFn(event) { // 值变化是触发
           console.log("变化event",event)
         
        },
        dateFormatter(type, value) {
          if (type === 'year') {
            return `${value}年`;
          }else if (type === 'month') {
            return `${value}月`;
          }else if (type === 'day') {
            return `${value}日`;
          }else if (type === 'hour') {
            return `${value}时`;
          }else if (type === 'minute') {
            return `${value}分`;
          }
          return value;
        },
        confirmFn(val) { // 确定按钮
          console.log('confim val>>',val,this.currentDate)
          
         
          let timeStamp = val.mp.detail
         
          this.currentDate = new Date(timeStamp)
          const dateStr = moment(this.currentDate).format('YYYY-MM-DD hh:mm:ss')
          console.log('dateStr>>',dateStr)
          this.timeValue = this.timeFormat(this.currentDate);
          this.btnName = this.timeValue
          this.show = false;
          console.log("this.currentDate ",this.currentDate,"  btnName>>",this.btnName," this.timeValue>>",this.timeValue)
          //this.$emit("datetime",this.timeValue);
          this.$emit("datetime",this.currentDate);
        },
        cancelFn(){
          this.show = false;
        },
        timeFormat(time) { // 时间格式化 2019-09-08
          let year = time.getFullYear();
          let month = time.getMonth() + 1;
          let day = time.getDate();
          let hour = time.getHours();
          let minute = time.getMinutes();
          let seconds = time.getSeconds();
          console.log("hour>>",hour,"  minute",minute," seconds>>",seconds)


          return time.getFullYear() + '-'
          + (time.getMonth() + 1).toString().padStart(2, "0") + '-'
          + time.getDate() + ' '
          + time.getHours().toString().padStart(2, "0") + ':'
          + time.getMinutes().toString().padStart(2, "0") + ':'
          + time.getSeconds().toString().padStart(2, "0")

          //return year + "年" + month + "月" + day + " 日 " + hour + " 时 " + minute + " 分"
        }
      },
      mounted() {
        this.btnName = this.selBtnName
        this.currentDate = new Date()
        console.log('minDate',this.minDate)
      },
      onLoad(options) {
         
      }
    }
  </script>
   
  <style>
  </style>